<template>
	<view class="chart-detail-wrap">
		<view class="daterange-box">
			<view class="date-label">
				<text>查询时间范围</text>
			</view>
			<view class="date-value">
        <uni-datetime-picker v-model="singleDate" type="daterange" @change="initData">
          <text>{{ singleDate[0] }}至{{ singleDate[1] }}</text>
        </uni-datetime-picker>
			</view>
		</view>
		<view class="chart-box">
			<view class="chart-title">
				<text>制水历史</text>
			</view>
			<view class="chart-wrap">
				<qiun-data-charts :canvas2d="canvasType" :ontouch="true" type="column" :opts="columnOpts" :chartData="columnChartData" />
			</view>
		</view>
		<view class="chart-box">
			<view class="chart-title">
				<text>原水水质</text>
			</view>
			<view class="chart-wrap">
				<qiun-data-charts :canvas2d="canvasType" :ontouch="true" type="line" :opts="lineOption1" :chartData="lineData1" />
			</view>
		</view>
		<view class="chart-box">
			<view class="chart-title">
				<text>净水水质</text>
			</view>
			<view class="chart-wrap">
				<qiun-data-charts :canvas2d="canvasType" :ontouch="true" type="line" :opts="lineOption1" :chartData="lineData2" />
			</view>
		</view>
	</view>
</template>

<script>
	import { getColumnOption, getLineOption } from "./option"
  import {checkIsDev, formatDate, request, showLoading} from "@/utils/tool";

  export default {
		data() {
      const endDate =new Date()
      const end = formatDate(endDate,'YYYY-MM-DD')
      const startDate = new Date(endDate.getFullYear(),endDate.getMonth(),1)
      const start = formatDate(startDate,'YYYY-MM-DD')
			return {
				columnOpts: getColumnOption(),
				lineOption1: getLineOption(),
				lineOption2: getLineOption(),
				columnChartData: {},
				lineData1: {},
				lineData2: {},
        deviceId: "",
        singleDate:[start,end]
			}
		},
		created() {
		},
    computed:{
      canvasType() {
        const isDev = checkIsDev()
        return !isDev
      }
    },
    onLoad(ev) {
      const {deviceId} = ev
      this.deviceId = deviceId
      this.initData()
    },
		methods: {
      async initData(){
        const hide=  showLoading("正在获取")
        const {deviceId,} = this
        const [start,end] =this.singleDate
        const resp = await request({
          url: "/yunying/shebeitubiao",
          data: {
            shebei_id: deviceId,
            start_date: start,
            end_date: end,
          },
          method: "get",
        }).finally(hide);
        const data = resp.data
        const {zhishuilishi,yuanshuishuizhi,jingshuishuizhi} = data
        console.log(resp,'resp')
        this.initZhiShui(zhishuilishi)
        this.initYuanShui(yuanshuishuizhi)
        this.initJingShui(jingshuishuizhi)
      },
      initYuanShui(data){
        const categories = [], list = [];
        data.forEach(item => {
          const {date,count} = item
          categories.push(formatDate(date,"YYYY"))
          list.push(count);
        })
        this.lineData1 = {
          categories,
          series: [{
            name: "原水水质",
            data: list
          }]
        };
      },
      initZhiShui(data){
        const categories = [], list = [];
        data.forEach(item => {
          const {date,count} = item
          categories.push(formatDate(date,'YYYY'))
          list.push(count)
        })
        this.columnChartData = {
          categories: categories,
          series: [{
            name: "单次制水量",
            data: list,
            unit: 'L',
            gridType: 'dash'
          }]
        };
      },
      initJingShui(data){
        const categories = [], list = [];
        data.forEach(item => {
          const {date,count} = item
          categories.push(formatDate(date,"YYYY"))
          list.push(count);
        })
        this.lineData2 = {
          categories,
          series: [{
            name: "净水水质",
            data: list
          }]
        };
      },

			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
						series: [{
							name: "原水水质",

							data: [15, 45, 15, 45, 15, 45, 15, 45]
						}, ]
					};
					const data = JSON.parse(JSON.stringify(res));
					this.lineData1 = data
					this.lineData2 = data
				}, 500);
			},
			getColumnData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026"],
						series: [{
							name: "单次制水量",
							data: [35, 36, 31, 33, 13, 34, 20, 18, 20],
							unit: 'L',
							gridType: 'dash'
						}]
					};
					this.columnChartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chart-detail-wrap {
		padding: 26rpx 34rpx;
		box-sizing: border-box;
		position: relative;

		.chart-box {
			margin-top: 26rpx;

			.chart-wrap {
				width: 100%;
				height: 460rpx;
			}

			.chart-title {
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				line-height: 48rpx;
				text-align: center;
				margin-bottom: 16rpx;
			}
		}

		.daterange-box {
			.confirm-btn {
				margin-top: 22rpx;
				width: 82rpx;
				height: 51rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #3361F0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #3361F0;
			}

			.date-value {
				font-size: 26rpx;
				color: #3361F0;
				line-height: 48rpx;
				margin-top: 10rpx;
			}

			.date-label {
				font-size: 28rpx;
				color: #000000;
				line-height: 48rpx;
			}
		}
	}
</style>